<template>
  <draggable item-key="name" v-model="list" class="drag-container" :move="onMove">
    <template #item="{ element }">
      <lay-col :md="element.cols" class="drag-item">
        <div class="grid-demo">
          <div class="card-container">
            <UnitTable v-if="element.type === 'table'" :modelname="element.model" :title="element.cnname"
                       :url="element.url" :orderfield="element.order_field" :orderasc="element.order_asc"
                       :selectstr="element.columns" :pagename="newpagename"
            ></UnitTable>
          </div>
        </div>
      </lay-col>
    </template>
  </draggable>
</template>
<script>
import {ref, onMounted, reactive, toRefs,watch} from 'vue'
import draggable from 'vuedraggable';
import {getPageList} from '../api/pages'
import UnitTable from '@/components/UnitTable'
import {useRouter} from "vue-router";
import router from "@/router";

export default {
  props: {
    params: Object
  },
  data() {
    return {
      isReload: false
    }
  },
  components: {
    draggable,
    UnitTable
  },
  methods: {
    onMove(obj) {
      return false;
    },
  },
  setup(props) {
    const router = useRouter();
    const pagename = router.currentRoute.value.params.pagename;
    let newpagename = "";
    if (typeof pagename === 'undefined') {
      newpagename = props.params.pagename;
    }else{
      newpagename = pagename;
    }
    const active1 = ref("1")
    const state = reactive({
      list: [],
      newpagename: newpagename
    })
    // 调取api获取数据
    const getNewsList = () => {
      const params = {
        page: 1,
        pageSize: 5,
        pagename: newpagename
      }
      getPageList(params).then(res => {
        state.list = res.data;
      })
    }
    watch(() => router.currentRoute.value.params, (newValue, oldValue)=>{
        console.log("================更新了============")
        console.log(state)
        console.log(router.currentRoute.value.params)
        const pagename = router.currentRoute.value.params.pagename;
        state.newpagename = pagename
        const params = {
          page: 1,
          pageSize: 5,
          pagename: pagename
        }
        getPageList(params).then(res => {
          state.list = res.data;
        })
    },{
      immediate: true
    })
    console.log(state.list)
    onMounted(getNewsList)
    // ...toRefs()将state里面得对象解构
    return {
      ...toRefs(state),
      active1,
      newpagename
    };
  },
};
</script>
<style>
.container-demo {
  width: 100%;
  height: 300px;
  background: #79C48C;
}

/deep/ .el-calendar-day {
  box-sizing: border-box;
  padding: 5px;
  height: 80px;
}

.grid-demo {
  line-height: 50px;
  border-radius: 2px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
}

.card-container1 {
  background: whitesmoke;
  padding: 10px;
  width: 70%;
}

.card-container2 {
  background: whitesmoke;
  padding: 10px;
  width: 20%;
}

.card-container {
  background: whitesmoke;
  padding: 10px;
  text-align: left;
}

.drag-container {
  #display: flex;
  justify-content: space-around;
  alignment: center;
}

.drag-item {
  cursor: move; /* 设置拖拽手势 */
  margin: 0px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 1px;
}

/* 拖拽时显示十字线 */
/*.drag-item:hover {*/
/*  opacity: 1;*/
/*  border: 2px solid red;  修改为你想要的颜色 */
/*}*/
</style>
